<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQ版放大镜</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- 左侧放大镜容器 -->
	<div class="main">
		<div class="smallBox"> 
			<!-- 贴膜 -->
			<div class="wrap"></div>
			<!-- 左侧放大镜图片 -->
			<img src="./img/timg.jpg" alt="">
			<!-- 小盒子 -->
			<span class="grayBox"></span>
        </div>
        <!-- 缩略图 -->
		<div class="choice-btn">
            <img src="./img/timg.jpg" alt="">
            <img src="https://img.zcool.cn/community/01f9d55efda3d5a8012066216f132c.jpg@260w_195h_1c_1e_1o_100sh.jpg" alt="">
		</div>
	</div>
	<!-- 大图容器 -->
	<div class="bigBox">
		<!-- 大图图片 -->
		<img src="./img/timg.jpg" alt="">
    </div>
    <script src="./js/jquery.3.5.1.js"></script>
    <script>
        // 构造函数
        function Magnifier(){
            // 获取元素并设置为构造函数属性：放大镜、小图、小图盒子、大图盒子、大图、缩略图
            this.grayBox = $('.grayBox');
            this.smallBox = $('.smallBox');
            this.sImg = $('.smallBox img');
            this.bigBox = $('.bigBox');
            this.bImg = $('.bigBox img');
            this.imgList = $('.choice-btn img');
            // 初始化缩略图索引
            this.index = 0;

            // 获取各元素宽高
            this.smallBox_size = {
                width: parseInt((this.smallBox).width()),
                height: parseInt((this.smallBox).height())
            }
            this.bigBox_size = {
                width: parseInt((this.bigBox).width()),
                height: parseInt((this.bigBox).height())
            }
            this.bImg_size = {
                width: parseInt((this.bImg).width()),
                height: parseInt((this.bImg).height())
            }
            
            // 调用方法
            this.bindEvent();
        }

        // 原型对象：事件绑定->鼠标移入、鼠标滑动、鼠标移出
        Magnifier.prototype.bindEvent = function(){

            var self = this;
            // 元素显示隐藏;
            this.smallBox.on('mouseover',function(){
                self.grayBox.css({
                    display:'block'
                })
                self.bigBox.css({
                    display:'block'
                })
            })
            this.smallBox.on('mouseout',function(){
                self.grayBox.css({
                    display:'none'
                })
                self.bigBox.css({
                    display:'none'
                })
            })

            // 移动
            this.smallBox.on('mousemove',function(e){
                var e = e || event;
                
                var _left = e.offsetX - 50;
                var _top = e.offsetY - 50;

                var sleft_max = self.smallBox.width() - self.grayBox.width();
                var stop_max = self.smallBox.height() - self.grayBox.height();

                if(_left<0){
                    _left = 0;
                }
                if(_left>sleft_max){
                    _left = sleft_max;
                }
                if(_top<0){
                    _top = 0;
                }
                if(_top>stop_max){
                    _top = stop_max;
                }

                self.grayBox.css({
                    left:_left,
                    top:_top
                })

                var left_scale = (_left/sleft_max).toFixed(2);
                var top_scale = (_top/stop_max).toFixed(2);

                var bleft_max = self.bImg_size.width - self.bigBox_size.width;
                var btop_max = self.bImg_size.height - self.bigBox_size.height;

                self.bImg.css({
                    left:- bleft_max*left_scale,
                    top: - btop_max*top_scale
                })

            })
            
            // 缩略图切换
            for(var i=0;i<self.imgList.length;i++){
                
                $(this.imgList[i]).attr('index',i);
                $(this.imgList[i]).on('mouseover',function(){
                    $(self).attr('index',$(this).attr('index'));
                    $(self.sImg).attr('src',$(this).attr('src'));
                    $(self.bImg).attr('src',$(this).attr('src'));
                })
            }
        }

        // 实例对象
        var mf = new Magnifier();

    </script>
</body>
</html>